<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue基本语法2</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="d1">
        <!--根据毫秒值构造日期对象-->
        {{new Date(birthday).getFullYear()}}年 {{new Date(birthday).getMonth()}}月 {{new Date(birthday).getDate()}}日 <br>
        {{birth}} <br>

        <!--watch监控变量值的变化-->
        watch监控变量值的变化：<input type="text" v-model="message">
    </div>
</body>
</html>
<script>
    var vue = new Vue({
        el:'#d1',
        data:{
            // 毫秒值
            birthday:1529032123201,
            message: 'hello,world',
        },
        // 自定义方法
        methods:{

        },
        // 计算属性
        computed:{
            // 计算属性的名字一定要定义成方法的形式
            birth(){
                // 定义对象
                let dt = new Date(this.birthday)
                // 组装数据
                return `${dt.getFullYear()}年 ${dt.getMonth()}月 ${dt.getDate()}日`
            }
        },
        // 对变量进行监控
        watch:{
            message(newN,oldN){ // 参数一代表新值，参数二代表旧值
                console.log("旧值：",oldN,"新值",newN)
            },
        },
        // vue的生命周期函数
        beforeCreate(){
            console.log("beforeCreated")
        },
        created(){
            console.log("created")
        },
        beforeMount(){
            console.log("beforeMount")
        },
        mounted(){
            console.log("mounted")
        },
        beforeUpdate(){
            console.log("beforeUpdate")
        },
        updated(){
            console.log("updated")
        },
        beforeDestory(){
            console.log("beforeDestory")
        },
        destoryed(){
            console.log("destoryed")
        },
    })
</script>